<template>
  <n-collapse accordion display-directive="show">
    <template #header-extra>
      <span class="text-fontPlaceholde px-2">{{ GroupListCache?.length ?? 0 }}</span>
    </template>
    <n-collapse-item name="1" title="我加入的群聊">
      <div
        v-for="(item, index) in GroupListCache"
        :key="index"
        :class="activeItem === item.id ? 'bg-CenterHover' : ''"
        class="grid grid-cols-[40px_1fr] items-center hover:bg-CenterHover gap-2 p-2 rounded-sm"
        @click="SelectGroup(item.id)"
      >
        <n-avatar :src="item.avatar" size="large" />
        <div class="text-xs text-fontRegular font-medium">
          {{ item.name }}
        </div>
      </div>
    </n-collapse-item>
  </n-collapse>
</template>

<script lang="ts" setup>
import { RightContentStatus } from "@/types/friend";

import { NAvatar, NCollapse, NCollapseItem } from "naive-ui";
import { useCache } from "@/store/modules/cache.ts";
import { storeToRefs } from "pinia";
import { ref } from "vue";

const cache = useCache();
const { GroupListCache } = storeToRefs(cache);
let activeItem = ref(0);
const emit = defineEmits<{
  (e: "selectGroup", groupId: number, status: RightContentStatus): void;
}>();

// 选中group
function SelectGroup(groupId: number) {
  activeItem.value = groupId;
  emit("selectGroup", groupId, RightContentStatus.groupDetail);
}
</script>

<style lang="scss" scoped></style>
